<template>
  <div class="content">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>我的信息</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
    <el-descriptions class="margin-top" :title="'我的信息（余额：'+(userInfo.balance?userInfo.balance:0)+'积分  ）'" :column="3" border>
      <template slot="extra">
        <el-button
          type="primary"
          size="small"
          @click="onChange"
          :loading="loading"
          >{{ isChange ? "结束修改" : "修改" }}</el-button
        >
      </template>
      <el-descriptions-item
        v-for="(item, index) in userInfo"
        :key="index"
        v-if="getTitle(index)"
      >
        <template slot="label">
          <i :class="getClass(index)"></i>
          {{ getTitle(index) }}
        </template>
        <template v-if="isChange">
          <el-select
            v-if="index == 'role'"
            v-model="form[index]"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-input
            v-else
            v-model="form[index]"
            autocomplete="off"
            :placeholder="'请输入' + getTitle(index)"
          ></el-input>
        </template>
        <template v-else>
          {{ getItem(item, index) }}
        </template>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
export default {
  name: "person",
  data() {
    return {
      userInfo: JSON.parse(sessionStorage.getItem("user")) || null,
      loading: false,
      isChange: false,
      timer: null,
      form: {},
      options: [
        {
          label: "管理员",
          value: 1,
        },
        {
          label: "会员用户",
          value: 2,
        },
        {
          label: "普通用户",
          value: 0,
        },
      ],
    };
  },
  created() {
    this.getInfo();
  },
  methods: {
    toLogin() {
      this.$emit("toLogin");
    },
    getItem(item, index) {
      switch (index) {
        case "admin":
          return item ? "管理员" : "普通用户";
        case "role":
          return item == 1 ? "管理员" :item == 2 ?"会员用户": "普通用户";
        case "password":
          return "*******";
        default:
          return item;
      }
    },
    getTitle(item) {
      switch (item) {
        case "nickName":
          return "昵称";
        case "username":
          return "用户名";
        case "phone":
          return "手机号";
        case "role":
          return "角色";
        case "email":
          return "邮箱";
        case "password":
          return "密码";
        default:
          return "";
      }
    },
    getClass(item) {
      switch (item) {
        case "username":
          return "el-icon-user";
        case "phone":
          return "el-icon-mobile-phone";
        case "role":
          return "";
        case "password":
          return "";
        default:
          return "";
      }
    },
    onChange() {
      if (this.isChange) {
        
        this.$confirm("确定结束修改吗？")
          .then((_) => {
            this.loading = true;
            this.timer = setTimeout(() => {
              this.done();
            }, 500);
          })
          .catch((_) => {});
      } else {
        this.isChange = !this.isChange;
      }
    },
    getInfo() {
      this.$api.getUserInfo().then((res) => {
        console.log(res);
        if (res.code === 200) {
          this.userInfo = res.data;
          // 设置Cookie
              this.$cookies.set('session_key', res.data, 60*60*24*7);
              sessionStorage.setItem("user", JSON.stringify(res.data)); // 存储用户信息到浏览器
          this.form = {};
          this.$emit("updateUser")
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    done() {
      let obj = this.userInfo;
      if (Object.keys(this.form).length == 0) {
        this.loading = false;
        this.isChange = !this.isChange;
        return;
      }
      for (const key in this.form) {
        if (Object.hasOwnProperty.call(this.form, key)) {
          const item = this.form[key];
          console.log(key, item);
          if (item || item==0) {
            obj[key] = item;
          }
        }
      }
      console.log(obj);
      this.$api.postEditUser(obj).then((res) => {
        console.log(res);
        if (res.code === 200) {
          sessionStorage.setItem("user", JSON.stringify(obj)); // 存储用户信息到浏览器
          this.userInfo = obj;
          this.form = {};
          this.$message.success("修改成功");
          this.getInfo()
          // 动画关闭需要一定的时间
        } else {
          this.$message.error(res.msg);
        }
        setTimeout(() => {
          this.loading = false;
          this.isChange = !this.isChange;
        }, 400);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 80%;
  padding: 50px 0;
  margin: 0 auto;
}
</style>
